<template>
  <a-card :bordered="false">
    <a-steps class="steps" :current="currentTab">
      <a-step title="填写初始化信息" />
      <a-step title="确认初始化信息" />
      <a-step title="完成" />
    </a-steps>
    <div class="content">
      <div v-if="currentTab === 0">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" style="max-width: 500px; margin: 40px auto 0;" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
          <a-form-model-item label="选择线路" prop="lineName">
            <a-input v-model='form.lineName' disabled />
          </a-form-model-item>
          <a-form-model-item label="选择站台" prop="platformName">
            <a-select v-model="form.platformName" placeholder="请选择站台">
              <a-select-option v-for="(e,i) in stations" :key="i" :value="e">{{e}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="设备类别" prop="deviceCategory">
            <a-select defaultValue="" v-model="form.deviceCategory" placeholder="请选择设备类别">
              <a-select-option v-for="item in equipmentCategory" :value="item.value" :key="item.value">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="PSD数量" prop="dcuNum">
            <a-select defaultValue="" v-model="form.dcuNum" placeholder="请选择PSD数量">
              <a-select-option :value="48">48</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :wrapperCol="{span: 19, offset: 5}">
            <a-button type="primary" @click="nextStep">下一步</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-if="currentTab === 1">
        <a-form style="max-width: 500px; margin: 40px auto 0;" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
          <a-alert :closable="true" message="确认初始化信息后，系统自动生成数据，无法退回。" style="margin-bottom: 24px;" />
          <a-form-item label="所属线路" class="stepFormText">
            {{form.lineName}}
          </a-form-item>
          <a-form-item label="站台名称" class="stepFormText">
            {{form.platformName}}
          </a-form-item>
          <a-form-item label="设备类别" class="stepFormText">
            <span v-if="form.deviceCategory=='FULL_HEIGHT'">全高站台门</span>
            <span v-if="form.deviceCategory=='HALF_HEIGHT'">半高站台门</span>
          </a-form-item>
          <a-form-item label="PSD数量" class="stepFormText">
            <span style="fontSize:20px">{{form.dcuNum}}</span>
          </a-form-item>
          <a-form-item :wrapperCol="{span: 19, offset: 5}">
            <a-button :loading="loading" type="primary" @click="initStation">确认</a-button>
            <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div v-if="currentTab === 2">
        <a-form style="margin: 40px auto 0;">
          <result :title="sTitle" :is-success="true" description="">
            <div slot="action">
              <a-button type="primary" @click="finish">确定</a-button>
            </div>
          </result>
        </a-form>
      </div>
    </div>
  </a-card>
</template>

<script>

import Result from './Result'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction, getAction } from '@/api/manage'
import axios from 'axios';

export default {
  name: "StepForm",
  mixins: [JeecgListMixin],
  components: {
    Result
  },
  data() {
    return {
      description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
      disableMixinCreated: true,
      currentTab: 0,

      // form
      form: {
        lineName: sessionStorage.getItem('lineName'),
        platformName: '',
        deviceCategory: '',
        dcuNum: null
      },
      rules: {
        platformName: [{ required: true, message: '请选择站台', trigger: 'change' }],
        deviceCategory: [{ required: true, message: '请选择设备类别', trigger: 'change' }],
        dcuNum: [{ required: true, message: '请选择PSD数量', trigger: 'change' }],
      },
      loading: false,
      stations: null,
      sTitle: '系统初始化完成',
      sysStatus:null
    }
  },
  watch:{
    sysStatus(val){
      if(val) {
        this.currentTab = 2
        this.sTitle = '系统初始化完成'
      }else{
        // this.currentTab = 0
        // this.sTitle = ''
      }
    }
  },
  created() {
    this.getStations()
    this.sysStatus = this.$store.state.user.initStatus
  },
  methods: {

    // handler
    nextStep() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.currentTab = 1
        } else {
          return false;
        }
      });

    },
    prevStep() {
      this.currentTab = 0
    },
    finish() {
      this.$router.push('/statistics/dataKanban')
    },
    getStations() {
      getAction('/track/init/getPlatformList').then(res => {
        if (res && res.code == 200) {
          console.log(res)
          this.stations = res.result
        }
      })
    },
    initStation() {
      this.loading = true
      let params = this.form
      params.dcuNum = Number(this.form.dcuNum)
      postAction('/track/init/initData', params,60000).then(res => {
        if (res && res.code == 200) {
          // console.log(res)
          this.$ls.set('INIT_STATUS', res.result)
          this.$store.commit('SET_INIT_STATUS', res.result);

          // this.sTitle = res.message
          // this.$message.success(this.sTitle)
          this.currentTab = 2
        }
      }).finally(() => {
        this.loading = false
      })

    },
  }
}
</script>

<style lang="less" scoped>
.steps {
  max-width: 750px;
  margin: 16px auto;
}
</style>